<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .bg-box {
            width: 100%;
            height: 300px;
            background: skyblue;
            position: relative;
        }

        .head-nav {
            width: 100%;
            height: 80px;
            line-height: 80px;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            background: #989797;
        }

        .head-list {
            height: 80px;
            display: flex;
            margin-left: 250px;
        }

        .head-list li {
            padding: 0 20px;
        }

        .head-right {
            height: 80px;
            display: flex;
            margin-right: 100px;
        }

        .head-right li {
            padding: 0 20px;
        }

        .content-box {
            width: 1190px;
            display: flex;
            justify-content: space-between;
            background: seagreen;
            margin: 0 auto;
            padding: 40px 0;
        }

        .head-swiper {
            height: 300px;
            width: 750px;
        }

        .swiper-food {
            width: 750px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            border: 1px solid #999;
            align-items: center;
            margin-bottom: 20px;
        }

        .swiper-food li {
            padding: 0 20px;
        }

        .swiper-news {
            width: 750px;
            overflow: hidden;
            /* padding: 0 20px 0 0; */
        }

        .swiper-new-lis {
            padding: 20px 0;
            border-bottom: 1px solid #999;

        }

        .news-box {
            display: flex;
            justify-content: space-between;
        }

        .news-img {
            width: 150px;
            height: 120px;
        }

        .news-dev {
            width: 300px;
        }

        .new-footer {
            width: 750px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dev-lis li {
            padding: 0 20px;
        }

        .right-box {
            width: 350px;
            overflow: hidden;
            margin-bottom: 40px;
        }

        .right-list {
            overflow: hidden;
            padding: 10px 0;
        }

        .right-list li {
            font-size: 15px;
            color: #333;
            height: 34px;
            line-height: 34px;
        }
    </style>
</head>

<body>
    <div class="bg-box">

    </div>
    <div class="head-nav">
        <ul class="head-list">
            <li>
                咨询
            </li>
            <li>
                美食
            </li>
            <li class="goHouse">
                租房
            </li>
            <li class="goBook">
                图书
            </li>
            <li>
                滑动到轮播图消失
            </li>
            <li>
                壁纸https://haowallpaper.com/
            </li>
        </ul>
        <ul class="head-right">
            <li>
                名字
            </li>
            <li>
                头像
            </li>
            <li>
                退出登录
            </li>
        </ul>
    </div>
    <div class="content-box">
        <div class="content-left">
            <!-- 轮播图1 -->
            <div class="swiper head-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">内容111</div>
                    <div class="swiper-slide">内容222</div>
                    <div class="swiper-slide">内容333</div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
            <div>
                <ul class="swiper-food">
                    <li>
                        最新报道
                    </li>
                    <li>
                        美图
                    </li>
                    <li>
                        深度
                    </li>
                    <li>
                        内地
                    </li>
                    <li>
                        港台
                    </li>
                </ul>
                <ul class="swiper-news">
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                    <li class="swiper-new-lis">
                        <h4
                            style="font-size: 20px;font-weight: 500;height: 30px;line-height: 30px;margin-bottom: 10px;">
                            SuperJunior曹圭贤遇袭负伤
                            行凶者已被警方逮捕</h4>
                        <div class="news-box">
                            <div class="news-img">
                                <img src="" alt="">
                            </div>
                            <p class="news-dev" style="font-size: 15px;width: 580px;">
                                位30代女性A某在19日下午闯入Superjunior圭贤所在的音乐剧化妆室,向演员们挥舞凶器
                                [详细]</p>
                        </div>
                        <div class="new-footer" style="font-size: 14px;">
                            <div>2024年11月12日23:02:30</div>
                            <ul style="display: flex;justify-content: space-around;" class="dev-lis">
                                <li>某某人</li>
                                <li>某某事</li>
                            </ul>
                            <div>评论(100)</div>
                        </div>
                    </li>
                </ul>
            </div>


        </div>
        <div class="content-right">
            <div class="right-box">
                <h4
                    style="font-size: 24px;height: 30px;line-height: 30px;color: blueviolet;display: flex;justify-content: space-between;">
                    热门排行<span style="margin-right: 10px;font-weight: normal;font-size: 14px;color: #999;">更多></span>
                </h4>
                <ul class="right-list">
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                </ul>
            </div>
            <div class="right-box">
                <h4
                    style="font-size: 24px;height: 30px;line-height: 30px;color: blueviolet;display: flex;justify-content: space-between;">
                    热门排行<span style="margin-right: 10px;font-weight: normal;font-size: 14px;color: #999;">更多></span>
                </h4>
                <ul class="right-list">
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                </ul>
            </div>
            <div class="right-box">
                <h4
                    style="font-size: 24px;height: 30px;line-height: 30px;color: blueviolet;display: flex;justify-content: space-between;">
                    热门排行<span style="margin-right: 10px;font-weight: normal;font-size: 14px;color: #999;">更多></span>
                </h4>
                <ul class="right-list">
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                    <li>
                        《绿灯侠》新剧定主演 凯尔·钱德勒加盟
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $('.goHouse').on('click', function () {
            location.assign('./houseIndex.html')
        })

        $('.goBook').on('click', function () {
            location.assign('./bookIndex.html')
        })
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })        
    </script>
</body>

</html>